<template>
    <div class="fanOut">
      <div class="profilePhoto" :style="{'background-image':'url('+imageUrl+')'}"></div>
      <div class="name">
        <p>{{this.followName}}</p>
      </div>
      <div class="op">
        <button  @click="sendmessage=true">发送消息</button>
        <button  @click="unfollow">取消关注</button>
        <button  @click="toMyPage">查看个人主页</button>
      </div>
            <el-dialog
          v-model="sendmessage"
          title="发送私信"
          width="40%"
          :before-close="handleClose"
        >
          <p style="margin: 3rem 0">发送给：</p>
          <el-input v-model="followName" disabled />
          <p style="margin: 3rem 0">标题</p>
          <el-input v-model="title" />   
          <p style="margin: 3rem 0">内容：</p>
          <el-input
            v-model="message"
            :rows="4"
            type="textarea"
            placeholder="请输入私信内容，不少于50字"
          />
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="sendmessage = false">取消</el-button>
              <el-button type="primary" @click="sendMsg"
                >发送</el-button
              >
            </span>
          </template>
      </el-dialog>
    </div>
</template>
<script>
import { data } from 'dom7'
import axios from 'axios'
export default {
  name: 'FollowCard',
  props: {
    userIdIn:String,
    userId:String,
    followName:String,
    imageUrl:String,
  },
  data:function(){
    return{
       sendmessage:false,
       message:"",
       title:"",
    }
  },
    methods:{
    toMyPage:function(){//去往个人页面
        this.$router.push({path:'/MyPage',query:{userId:this.userId,userIdIn:this.userIdIn}});
    },
      sendMsg:function(){
      //与后端交互，发送信息
      axios.post('/api/communication/message',{content:this.message,title:this.title,senderId:this.userIdIn,ownerId:this.userId})
      .then(response=>{
          console.log(response);
          if(response.data.code==200){
              this.$message({message:"发送成功",type:'success'});
          }else{
              this.$message({message:"发送失败 "+response.data.msg,type:'error'});
          }
      })
      .catch(error=>{
          this.$message({message:"发送失败",type:'error'});
      })
      this.sendmessage=false;
    },
    unfollow:function(){
          axios.delete('/api/follow',{data:{followerId:this.userIdIn,followingId:this.userId}})
          .then(response=>{
            if(response.data.code==200){
                  this.$message({message:"取关成功",type:'success'});
                  this.isFollow=false;
                  this.$emit('deleteFollow',this.userId);
              }else{
                  this.$message({message:"取关失败 "+response.data.msg,type:'error'});
                  this.isFollow=true;
              }
          })
          this.isFollow=false;
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fanOut{
  width:60rem;
  height:5rem;
  box-shadow: 0.3rem 0.3rem 0.5rem #607d8b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom:2rem;
}
.fanOut p{
  color:#1a237e;
  font-size: 1.2rem;
  font-weight: 500;
}
button{
  width: 6.5rem;
  height: 2rem;
  background-color: #1e88e5;
  color: white;
  border: none;
  outline: none;
  box-shadow: 0.2rem 0.2rem #1565c0;
}
button:hover{
  background-color: #1565c0;
}
.profilePhoto{
  width:4.5rem;
  height:4.5rem;
  border-radius: 4.5rem;
  background-size:cover;
  border: solid #9e9e9e;
}
.name{
  width: 10rem;
  height: 4rem;
  line-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 2rem;
}
.op{
  width:25rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 8rem;
}
</style>